<!DOCTYPE HTML>
<html>
<head>
    <title>Game Class File </title>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
        type="text/javascript"></script>
    <script language="javascript" src="jquery.hotkeys.js" type="text/javascript"></script>
    <script language="javascript" src="key_status.js" type="text/javascript"></script>
</head>
<body>
    <canvas id="myCanvas" width="840" height="480" style="border: 1px solid #000000;">

Your browser does not support the canvas element.
</canvas>
    <script type="text/javascript">
        // initialize javascript canvas elements
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d"); // temporarily a 2D context
        var obstacles = new Array();
        var gravity = true;



        /*
        * all book keeping variables go here
        */
        var FPS = 60; // set the frame rate to 60

        // this will be the ball object that the player has control of
        function playerBall() {
            this.x_vel = 0;
            this.y_vel = 0;
            this.x_pos = 50;
            this.y_pos = 50;
            this.inPlay = true;
            // drawFunction: draw(),
            this.update = function () {
                this.x_pos += this.x_vel;
                this.y_pos += this.y_vel;

                // gravity
                this.x_vel += 0;
                if (gravity == true) {
                    this.y_vel += 0.091;
                } else {
                    this.y_vel -= 0.091;
                }

                // check bounds,
                if (this.y_pos >= 480) {
                    this.y_vel = -this.y_vel;
                }

                //check collisions with objects
                for (var i = 0; i < obstacles.length; i++) {
                    if ((this.x_pos + this.x_vel >= obstacles[i].minx) && (this.x_pos + this.x_vel <= obstacles[i].maxx) && (this.y_pos >= obstacles[i].miny) && (this.y_pos <= obstacles[i].maxy)) {
                        this.x_vel = -this.x_vel;
                        this.x_vel *= 0.70;
                        if (obstacles[i].hazard == true) {
                            this.inPlay = false;
                        }
                    }

                    if ((this.y_pos + this.y_vel >= obstacles[i].miny) && (this.y_pos + this.y_vel <= obstacles[i].maxy) && (this.x_pos >= obstacles[i].minx) && (this.x_pos <= obstacles[i].maxx)) {
                        this.y_vel = -this.y_vel;
                        this.y_vel *= 0.70;
                        if (obstacles[i].hazard == true) {
                            this.inPlay = false;
                        }
                    }
                }

                // because the surfaces are always attenuating the velocity
                if (this.y_pos >= 475 && this.y_pos <= 485) {
                    this.y_vel *= 0.70;
                    //this.x_vel *= 0.70;
                }

                this.x_vel *= 0.95;

                // set the maximum velocity
                if (this.x_vel >= 7.5) {
                    this.x_vel = 7.5;
                }
                if (this.x_vel <= -7.5) {
                    this.x_vel = -7.5;
                }


            };
            // ^ Note: this function will calculate physics, etc.

            return this;
        }

        // this will be an "obstacle" element
        function Obstacle(x, y, x_, y_) {
            this.minx = x;
            this.maxx = x_;
            this.miny = y;
            this.maxy = y_;
            this.hazard = false;

            // the update function that involves physics, updating obstacles may
            // prove interesting
            //this.update = function() {};

            return this;
        }

        /*
        * Create game objects and draw fields
        * Also include information for changing the ball's direction and velocity
        * based on keyboard strokes (right now, just up and down)
        */

        var mainBall = new playerBall();



        // random obstacles

        obstacles[0] = new Obstacle(100, 300, 200, 480);
        //obstacles[1] = new Obstacle(150, 400, 400, 480);
        obstacles[1] = new Obstacle(400, 0, 840, 50);
        obstacles[2] = new Obstacle(0, 0, 400, 40);
        obstacles[2].hazard = true;
        obstacles[3] = new Obstacle(100, 100, 200, 200);
        obstacles[3].hazard = true;
        obstacles[4] = new Obstacle(341, 418, 400, 480);
        obstacles[4].hazard = true;


        /*
        * update methods, etc.
        */

        // handles indent
        function handleKeyDown(evt) {

            switch (evt.keyCode) {
                case 38:  /* Up arrow was pressed */
                    if (mainBall.y_pos >= 475) {
                        mainBall.y_vel -= 3.0;
                    }
                    break;
                case 40:  /* Down arrow was pressed */
                    mainBall.y_vel += 0.20;
                    break;
                case 37:  /* Left arrow was pressed */
                    mainBall.x_vel -= 0.70;
                    break;
                case 39:  /* Right arrow was pressed */
                    mainBall.x_vel += 0.70;
                    break;
                case 17:
                    gravity = false;
                    break;

            }
        }

        function handleKeyUp(evt) {
            switch (evt.keyCode) {
                case 17:
                    gravity = true;
                    break;
            }
        }

        // need to add events
        window.addEventListener('keyup', handleKeyUp, true);
        window.addEventListener('keydown', handleKeyDown, true);

        function drawBall(context, ball) {
            if (ball.inPlay == true) {
                context.beginPath();
                if (gravity == true) {
                    context.fillStyle = "#ff0000";
                } else {
                    context.fillStyle = "#ff0000";
                }
                context.arc(ball.x_pos, ball.y_pos, 10, 0, Math.PI * 2, true);
                context.closePath();
                context.stroke();
            }
        }

        function drawObstacle(context, obstacle) {
            context.beginPath();
            if (obstacle.hazard == true) {
                context.fillStyle = "#ff0000";
            } else {
                context.fillStyle = "#00FF00";
            }
            context.fillRect(obstacle.minx, obstacle.miny, obstacle.maxx - obstacle.minx, obstacle.maxy - obstacle.miny);
            context.closePath();
            context.stroke();
        }

        // sets the interval for updating the screen
        setInterval(function () {
            update();
            draw();
        }, 1000 / FPS);

        function update() {
            mainBall.update();
        }

        function draw() {
            // clear the window
            context.fillStyle = "#ffffff";
            context.fillRect(0, 0, 840, 480);

            // draw the ball object
            drawBall(context, mainBall);

            // draw all the obstacles
            for (var i = 0; i < obstacles.length; i++) {
                drawObstacle(context, obstacles[i]);
            }

        }


 
 
    </script>
</body>
</html>
